import { useNavigate } from 'react-router-dom'
import { Button, Card } from 'antd'
import { 
  EditOutlined, 
  ThunderboltOutlined, 
  CheckCircleOutlined,
  RocketOutlined
} from '@ant-design/icons'
import './HomePage.css'

function HomePage() {
  const navigate = useNavigate()

  return (
    <div className="home-page">
      {/* 顶部导航 */}
      <header className="home-header">
        <div className="logo">
          <EditOutlined style={{ fontSize: 24, color: '#1890ff' }} />
          <span className="logo-text">微信排版工具</span>
        </div>
      </header>

      {/* 主内容区 - 极简设计 */}
      <div className="home-hero">
        <div className="hero-content fade-in">
          <h1 className="hero-title">
            3分钟完成专业排版
          </h1>
          <p className="hero-subtitle">
            专为学校推文设计 · 简约精美 · 一键生成
          </p>
          
          <Button 
            type="primary" 
            size="large"
            icon={<RocketOutlined />}
            className="start-button"
            onClick={() => navigate('/editor')}
          >
            开始创作
          </Button>

          {/* 简单的步骤说明 */}
          <div className="steps-container">
            <div className="step-item">
              <div className="step-number">1</div>
              <div className="step-text">输入内容</div>
            </div>
            <div className="step-arrow">→</div>
            <div className="step-item">
              <div className="step-number">2</div>
              <div className="step-text">选择模板</div>
            </div>
            <div className="step-arrow">→</div>
            <div className="step-item">
              <div className="step-number">3</div>
              <div className="step-text">一键排版</div>
            </div>
          </div>
        </div>
      </div>

      {/* 特色功能 - 简约卡片 */}
      <div className="features-section">
        <div className="features-grid">
          <Card className="feature-card" bordered={false}>
            <ThunderboltOutlined className="feature-icon" />
            <h3>智能识别</h3>
            <p>自动识别标题、小标题和段落结构</p>
          </Card>

          <Card className="feature-card" bordered={false}>
            <EditOutlined className="feature-icon" />
            <h3>精美模板</h3>
            <p>10+专为学校推文设计的模板</p>
          </Card>

          <Card className="feature-card" bordered={false}>
            <CheckCircleOutlined className="feature-icon" />
            <h3>一键复制</h3>
            <p>生成的HTML直接粘贴到公众号</p>
          </Card>
        </div>
      </div>

      {/* 底部 */}
      <footer className="home-footer">
        <p>让排版更简单 · 让创作更专注</p>
      </footer>
    </div>
  )
}

export default HomePage

